<template>
  <div>
    <div class="display_sw">
      <div class="home_left home_left2" v-if="win_number.winning_num">
        <template v-if="!credit">
          <span class="shengxiao_span" v-for="(item,index) in list" :key="index">
            <img :src="require('../../assets/images/caipiao/shengxiao'+item+'.png')" alt />
          </span>
        </template>
        
        <template v-if="credit">
          <span class="shengxiao_span_radius" v-for="(item,index) in list" :key="index">{{item}}</span>
        </template>
      </div>
      <p class="home_you_fz">
             第
        <b class="color_red">{{win_number.nper}}</b> 期
      </p>
    </div>
    <p class="home_you_fz1" v-if="date">
      第
      <b class="color_red">{{arriveNper}}</b> 期
      <template v-if="$store.state.is_bet">投注时间 </template>
      <template v-else>正在开奖 </template>
      <b class="color_red">{{count}}</b>
    </p>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import _isEmpty from "lodash/isEmpty";
import {winNumber} from "../../service/api";
import {countDown} from "../../util/utils";
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'
dayjs.locale('zh-cn')
dayjs.extend(relativeTime)
let timer;
export default {
  props: {
    credit: {
      type: Boolean,
      default() {
        return false;
      }
    },
    date: {
      type: Boolean,
      default() {
        return true;
      }
    }
  },
  data(){
    return {
      count: ''
    }
  },
  computed: {
    arriveNper() {
      let nper = parseInt(this.win_number.nper);
      if(!nper){
        return 0
      }
      return nper+1
    },
    list() {
      return this.win_number.winning_num.split(",");
    },
    ...mapState(["win_number", "bonus_odd", "user_info"])
  },
  created() {
    _isEmpty(this.bonus_odd) && this.asyncBonusOdd();
    _isEmpty(this.user_info) && this.asyncGetUserInfo();
    this.getWinNumber();
  },
  methods: {
    async getWinNumber(){
      let res = await winNumber();
      if (res.data.status_code === 200) {
        let startTime = res.data.data.data[0].created_at;
        let diff = dayjs().diff(dayjs(startTime), 'minutes');
        if(diff >= 9){
          this.$store.commit('set_is_bet', false);
          let endTime = dayjs(startTime).add(605, 'seconds').format("YYYY/MM/DD HH:mm:ss");
          timer = setInterval(() => {
            console.log('结算',diff)
            this.count = countDown(endTime, () => {
              clearInterval(timer);
              this.getWinNumber();
              this.$emit('completeCount')
            })
          }, 1000);
        }else{
          this.$store.commit('set_is_bet', true);
          let endTime = dayjs(startTime).add(9, 'minutes').format("YYYY/MM/DD HH:mm:ss");
          timer = setInterval(() => {
            console.log('投注',diff)
            this.count = countDown(endTime, () => {
              clearInterval(timer);
              this.getWinNumber();
            })
          }, 1000);
        }

        this.$store.commit("set_win_number", res.data.data.data[0]);
      }
    },
    ...mapActions(["asyncBonusOdd", "asyncGetUserInfo"])
  },
  beforeDestroy(){
    clearInterval(timer);
  }
};
</script>
<style>
  .shengxiao_span_radius{
    width: .6rem;
    height: .6rem !important;
    background-color: #d21d17;
    border-radius: 50%;
    margin-top: .1rem;
    color: #ffffff !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .home_left2 span{margin-right: 0.1rem;}
</style>
